<template>
	<view class="content">
		<view class="wraper">
			<view class="top flex mtb-12">
				<view class="avater">
					<image src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="namebox w-50 flex col bt">
					<view class="name">
						昵称
					</view>
					<view class="msg">
						12314124121
					</view>
				</view>
			</view>
			<view class="title">
				商城订单
			</view>
			<view class="shop flex">
				<view class="item">全部</view>
				<view class="item">未发货</view>
				<view class="item">已发货</view>
				<view class="item">已完成</view>
			</view>
			<block>
				<view class="title">
					去发货
				</view>
				<view class="shopker flex">
					<view class="gopost ">
						去发货
					</view>
					<view class="history w-80">
						发布历史
					</view>
				</view>
			</block>

			<view class="title">
				我的寻宠
			</view>
			<view class="lost">
				<view class="list flex">
					<view class="petname">
						阿狗
					</view>
					<view class="lostdate">
						2024-01-07
					</view>
					<view class="go">
						<image src="../../../static/icon/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="title">
				精品推荐
			</view>
			<view class="recommend flex wrap bt">
				<view class="recwraper">
					<view class="recimg">
						<image src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="rectext">
						好狗狗
					</view>
				</view><view class="recwraper">
					<view class="recimg">
						<image src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="rectext">
						好狗狗
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: linear-gradient(#0f47ff, #fff);

		.wraper {
			padding: $uni-spacing-row-base;

			.top {
				width: 100%;
				max-height: 400rpx;
				min-height: 200rpx;
				background: #fff;
				border-radius: 100rpx;
				box-shadow: 20rpx 20rpx 40rpx #000;

				.avater {
					width: 120rpx;
					height: 120rpx;
					margin-top: 40rpx;
					margin-left: 40rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.namebox {
					margin: 34rpx 10rpx;
					overflow: hidden;

					// text-overflow: ellipsis;
					.name {
						font-size: 44rpx;
						color: #000;
					}

					.msg {
						color: gray;
					}
				}

				.date {
					font-size: 24rpx;
					padding-left: 20rpx;
					padding-top: 20rpx;
				}
			}

			.title {
				font-size: 45rpx;
				font-weight: 600;
				color: #000;
				margin: 25rpx 0;
			}

			.shop {
				width: 100%;
				// border: 1px solid;

				.item {
					width: calc(100%/4);
					height: 140rpx;
					margin: 0 5rpx;
					text-align: center;
					line-height: 140rpx;
					border: 1px solid #fff;
					border-radius: 70rpx;
				}
			}

			.shopker {
				height: 240rpx;
				text-align: center;

				.gopost {
					color: red;
					margin: 0 20rpx;
					border: 1px solid #000000;
					width: 40%;
				}

				.history {
					color: orange;
					border: 1px solid #ff5500;
				}
			}

			.lost {
				.list {
					margin: 20rpx 0;
					padding: 40rpx 0;
					width: 100%;
					background: #fff;
					position: relative;

					.petname {
						padding: 0 20rpx;

					}

					.lostdate {
						color: #ff0000;
					}

					.go {
						position: absolute;
						right: 20rpx;
						padding-right: 20rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			.recommend {
				width: 100%;

				.recwraper {
					border: 1px solid;
					margin: 20rpx;
					width: 43%;
					.recimg {
						height: 350rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.rectext {
						height: 120rpx;
						text-align: left;
						color: #ff5e01;
						background-color: #fff;
						text-indent: 12rpx;
					}
				}
			}
		}
	}
</style>